<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
	<div class="box">box0</div>
	<div>
		<div>class绑定</div>
		<div class="box" :class="box1">box1</div>
		<div class="box" :class="box2">box2</div>
		<div class="box" :class="box3">box3</div>
	</div>
	<div>
		<div>style绑定</div>
		<div class="box" :style="style1">box4</div>
		<div class="box" :style="style2">box5</div>
		<div class="box" :style="style3">box6</div>
		<div class="box" :style="style4">box7</div>
	</div>
  
  <!-- *列表点击高亮demo -->
  <!-- style 方式实现 -->
  <div>
    <div v-for="(item, index) in list" :style="item.style" @click="clickItem(item, index)">style栏目{{ index }}</div>
  </div>
  <br>
  <!-- class 方式实现 -->
  <div>
    <div v-for="(item, index) in list2" :class="item.show ? 'active' : '' " @click="clickItem2(item, index)">class栏目{{ index }}</div>
  </div>
  <br>
  
  <!-- 二维数组的列表 -->
  <div>
    <div v-for="(item, index) in list3">
      一级栏目{{index}}
      <div v-for="(item, i) in item.children" @click="clickItem3(index, i)">&#12288;二级栏目{{i}}</div>
    </div>
  </div>
</div>

<style>
.active{
  color: red;
}
.box{
	width: 100px;
	height: 100px;
	margin: 5px;
	background-color: #ccc;
	color: white;
	display: inline-block;
}

.backgroundRed{
	background-color: red;
}
.backgroundBlue{
	background-color: blue;
}
.borderYellow{
	border: 2px solid yellow;
}
.borderGreen{
	border: 20px solid green;
}

</style>

<script>
var vm = new Vue({
	el: '#main',
	data: {
		box1: 'backgroundRed',
		box2: [
			'backgroundBlue',
			'borderYellow',
		],
		box3: {
			backgroundRed: true,
			backgroundBlue: false,
			borderYellow: false,
			borderGreen: true,
		},
		
		style1: 'background-color: black;',
		
		style2: {
			backgroundColor: 'red',
			border: '20px solid yellow',
			'margin-left': '50px',
		},
		
		style3: {
			width: '150px',
			height: '150px',
		},
		style4: [],
    list: [{},{},{},{},{},{},{},{},{},],
    list2: [{},{},{},{},{},{},{},{},{},],
    list3: [
      {
        children: [
          {},{},{},
        ]
      },
      {
        children: [
          {},{},{},
        ]
      },
      {
        children: [
          {},{},{},
        ]
      },
    ]
	},
	// 生命周期: 初始化时运行以下函数 
	created() {
		this.style4 = [
			this.style2,
			this.style3,
		]
	},
  methods: {
    clickItem(item, index) {      
      // 被点击的元素高亮
      // const style = 'color: red;'
      // this.$set(item, 'style', style)
      
      // 除了被点击的元素高亮, 其他元素取消高亮
      // item_ohter.style = '' 
      // 如何识别哪一个元素是其他元素
      // 如果每一项有一个唯一标识符id
      this.list.forEach((obj, i) => {
        // 方法一
        if (index == i) {
          this.$set(obj, 'style', 'color: red;')
        } else {
          this.$set(obj, 'style', '')
        }
        
        // 方法二 简写
        // this.$set(obj, 'style', index == i ? 'color: red;' : '')
      })
    },
    clickItem2(item, index) {
      this.list2.forEach((obj, i) => {
        this.$set(obj, 'show', index == i ? true : false) // class 方式实现, 通过改变元素的一个标志位
      })
    },
    clickItem3(index, i) {
      console.log(`点击了第${index}一级栏目的${i}二级栏目`)
    },
  }
})
</script>

<script src="">
// class与style
// 对于特殊的属性即class,style,Vue.js做了专门的加强,表达式的类型除了是字符串之外,还可以是对象或数组

// vue对class,style的插值会与原本标签内的属性进行合并

// 用对象的形式给style设置对应的样式时,如果样式中有下划线,必须把对象的key中的下划线后的字符改为大写字母,并删除下划线, 或者将key用引号包裹
</script>